// 1. 下载 vue-router 模块
//   yarn add vue-router
// 2. 按需导入模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '@/utils/localData.js'

// 🔔 @ 是脚手架配置提供的别名，表示项目的 src 目录

// 3. 注册路由组件，可以用到 <router-view></router-view> 和 <router-link></router-link>
Vue.use(VueRouter)

// 4. 路由映射关系(路径与组件)
// 直接引入
// import Login from '@/views/Login.vue'
// import Home from '@/views/Home.vue'
// import Index from '@/views/Index.vue'
// import PostList from '@/views/Post/List.vue'
// import PostPublish from '@/views/Post/Publish.vue'

// 按需引入
// 🎃 使用jt生成箭头函数的注意：这里箭头函数简写省略了两个东西 { } 和 return
const Login = () => import('@/views/Login.vue')
const Home = () => import('@/views/Home.vue')
const Index = () => import('@/views/Index.vue')
const PostList = () => import('@/views/Post/List.vue')
const PostPublish = () => import('@/views/Post/Publish.vue')

// 🔔 组件加载优化建议：提高首屏加载速度(首屏组件可直接加载，其他组件按需加载即可)
// import 关键字  - 直接加载组件
// import 函数    - 按需加载组件 - 不能直接调用，封装成函数，按需调用

const routes = [
  // { path, component, name , children,  redirect , meta  }
  { path: '/login', component: Login },
  { path: '/', redirect: '/home' },
  {
    path: '/home',
    component: Home,
    redirect: '/home/index',
    children: [
      // 🔔 注意：子路由不要写 /
      { path: 'index', component: Index },
      { path: 'post_list', component: PostList },
      // 动态路由参数后的问号 ? 表示动态路由的 id 可写可不写
      //   情况1：没传递了 id 就是文章发布
      //   情况2：传递了 id 就是文章编辑
      { path: 'post_publish/:id?', component: PostPublish },
    ],
  },
]

// 5. 创建路由实例
const router = new VueRouter({
  routes: routes,
})

// .beforeEach()  前置导航守卫
//    to      要去哪里
//    from    来自哪里
//    next    是否方向的函数
// router.beforeEach((to, from, next) => {
//   // 后台管理系统，只有登录页是直接放行的
//   if (to.path === '/login') {
//     next()
//   } else {
//     // 其他的页面都要检查，有 token 放行，没有就去登录页
//     if (getToken()) {
//       next()
//     } else {
//       // next({ path: '/login' })
//       next('/login')
//     }
//   }
// })

// 6.1 导出路由实例
export default router
